<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/styles/styles-personal-area.css">
    <script type="text/javascript" src="/js/favoritePosition.js"></script>
    <title>personal-area</title>
</head>
<body>

<header>
    <h1>Your Profile</h1>
    <form th:action="@{/admin/admin-dashboard}" method="get" th:if="${userRole == 'ADMIN'}">
        <button class="styled-button">Admin Dashboard</button>
    </form>
</header>
<a href="/">
    <div class="home"></div>
</a>
<section class="profile">
    <div class="profile-info">
        <div class="user-info">
            <h2>Name</h2>
            <p th:text="${name}"></p>
        </div>
        <div class="user-info">
            <h2>Age</h2>
            <p th:text="${age}"></p>
         </div>
     </div>
    <div class="button-container">
        <form th:action="@{/change-user-information}" method="get">
            <button class="logout-button">Change</button>
        </form>
    </div>
    <div class="button-container">
        <form th:action="@{/api/logout}" method="get">
            <button class="logout-button">Logout</button>
        </form>
    </div>
</section>
<div class="favorite-positions">
    <p>Favorite cars:</p>
    <p>Add  cars using the special button next to the search result.</p>
</div>
<div class="favorite-positions" th:if="${favoritePosition!=null}">
    <h2>Favorite Positions</h2>
    <ul th:each="position : ${favoritePosition}">
        <li>
            <label>
                <input type="checkbox" name="position" value="" th:value="${position}">
            </label>
            <span th:text="${position}"></span>
        </li>
    </ul>
    <form th:action="@{/api/car/clear}" method="post">
        <button>Clear</button>
    </form>
    <form th:action="@{/car/compare}" method="get" th:if="${favoritePosition!=null}">
        <input type="hidden" name="position1" id="position1Input">
        <input type="hidden" name="position2" id="position2Input">
        <button id="compareButton">Compare</button>
    </form>
</div>
<div class="favorite-positions" th:if="${resultCompareCar != null}">
    <div th:utext="${resultCompareCar}"></div>
    <form th:action="@{/engine/me}" method="get">
        <button>OK</button>
    </form>
</div>
<footer>
    <p>&copy; 2024 Car-Engine</p>
</footer>
</body>
</html>